<template>
  <div class="cart-container">
    <h1>总价：{{ totalPrice }}</h1>
    <template v-for="item in cartList">
      <van-card
        :key="item.id"
        :num="item.count"
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="item.img"
      >
        <template #footer>
          <van-button size="mini" @click="handleAddItem(item)">+</van-button>
          <van-button size="mini" @click="handleReduceItem(item)">-</van-button>
        </template>
      </van-card>
    </template>
  </div>
</template>

<script>
export default {
  // 计算属性 缓存
  computed: {
    totalPrice() {
      return this.$store.getters.totalPrice
      // return this.cartList.reduce((num, item) => {
      //   return num + item.count * item.price
      // }, 0)
    },
    cartList() {
      return this.$store.state.cartList
    },
  },
  methods: {
    handleAddItem(item) {
      this.$store.commit('ADD_CART_ITEM', item)
      // item.count++
      // localStorage.setItem('toCart', JSON.stringify(this.cartList))
    },
    handleReduceItem(item) {
      this.$store.commit('REDUCE_CART_ITEM', item)
      // localStorage.setItem('toCart', JSON.stringify(this.cartList))
    },
  },
}
</script>

<style></style>
